<template>
  <view class="container">
    <view class="stats">
      <view>今天阅读：<text class="num">{{ readDetail[0] }}本</text></view>
      <view>本周阅读：<text class="num">{{ readDetail[1] }}本</text></view>
      <!-- <view>阅读天数：<text class="num">4天</text></view> -->
      <!-- <view>加入天数：<text class="num">8天</text></view> -->
    </view>
    <view class="clear-btn" @click="clearRecords">清空记录</view>
    <view class="book-list">
      <view v-for="(item, idx) in books" :key="item.id" class="book-card">
        <image :src="item.book.coverUrl" class="cover" />
        <!-- <view class="badge" :class="item.status === 'read' ? 'badge-read' : ''">
          {{ item.status === 'read' ? '读完' : item.time }}
        </view> -->
        <view class="delete-btn" @click="removeRecord(item, idx)">🗑</view>
        <view class="title">{{ item.book.title }}</view>
      </view>
      <view v-if="books.length === 0" class="empty">--没有更多数据了--</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { http } from "@/utils/http";
import { showToast } from "@/utils/toast";
import { onMounted, ref } from 'vue';
const page = ref(1)
const pageSize = ref(10)
const records = ref([
  { id: 1, title: 'New T...', cover: '/static/images/book1.svg', time: '8分钟前', status: '' },
  { id: 2, title: 'Who I...', cover: '/static/images/book2.svg', time: '8分钟前', status: '' },
  { id: 3, title: 'Cha...', cover: '/static/images/book3.svg', time: '1天前', status: '' },
  { id: 4, title: 'Who I...', cover: '/static/images/book2.svg', time: '1天前', status: '' },
  { id: 5, title: 'Cha...', cover: '/static/images/book3.svg', time: '1天前', status: '' },
  { id: 6, title: 'Cha...', cover: '/static/images/book3.svg', time: '4天前', status: '' },
  { id: 7, title: 'Cha...', cover: '/static/images/book3.svg', time: '5天前', status: 'read' },
  { id: 8, title: 'Cha...', cover: '/static/images/book3.svg', time: '5天前', status: 'read' },
  { id: 9, title: 'Cha...', cover: '/static/images/book3.svg', time: '5天前', status: 'read' },
  { id: 10, title: 'Cha...', cover: '/static/images/book3.svg', time: '5天前', status: 'read' },
  { id: 11, title: '巴巴...', cover: '/static/images/book1.svg', time: '5天前', status: '' },
  { id: 12, title: 'Cha...', cover: '/static/images/book3.svg', time: '5天前', status: '' },
  { id: 13, title: 'Cha...', cover: '/static/images/book3.svg', time: '5天前', status: '' }
])
const books = ref([])
const readDetail = ref([])

onMounted(() => {
  getUserReadRecords()
  getReadDetail()
})

const getUserReadRecords = async () => {
  http.get(`/admin-api/picturebook/reading-record/page?pageNo=${page.value}&pageSize=${pageSize.value}`).then(async res => {
    console.log(res);
    books.value = res.data.list
  })
}

const getReadDetail = async () => {
  http.get(`/admin-api/picturebook/reading-record/get-reading-record-count`).then(async res => {
    console.log(res.data.split('-'));
    readDetail.value = res.data.split('-')
  })
}

function removeRecord(book, idx: number) {
  http.delete(`/admin-api/picturebook/reading-record/delete?BookId=${book.book.id}`).then(res => {
    if(!res.code) {
      books.value.splice(idx, 1)
      showToast('删除成功')
    }else {
      showToast("删除失败")
    }
  })
}
function clearRecords() {
  records.value = []
}
</script>

<style scoped>
.container {
  background: #fff;
  min-height: 100vh;
  padding: 0;
}
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  border-bottom: 1px solid #eee;
  position: relative;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #222;
}
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 24rpx 32rpx 0 32rpx;
  font-size: 28rpx;
  color: #333;
}
.stats view {
  width: 48%;
  margin-bottom: 8rpx;
}
.num {
  color: #1976d2;
  font-weight: bold;
}
.clear-btn {
  color: #1976d2;
  font-size: 26rpx;
  text-align: right;
  padding: 0 32rpx 12rpx 0;
  cursor: pointer;
}
.book-list {
  display: flex;
  flex-wrap: wrap;
  padding: 32rpx 0 0 0;
  justify-content: flex-start;
  margin-inline: 48rpx;
  row-gap: 24rpx;
  column-gap: 36rpx;
}
.book-card {
  width: 140px;
  height: 180px;
  border-radius: 18px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.06);
  padding: 16px 10px 12px 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 180px;
  background: linear-gradient(135deg, #fceabb 0%, #f8b500 100%);
  transition: box-shadow 0.2s;
  margin-bottom: 2px;
}
.book-card:nth-child(4n) {
  margin-right: 0;
}
.cover {
  height: 140px;
  width: 100px;
  object-fit: contain;
  border-radius: 8px;
  margin-top: 8px;
  background: #fff;
}
.badge {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 13px;
  border-radius: 10px;
  padding: 2px 12px;
  z-index: 2;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
}
.badge-read {
  background: linear-gradient(90deg, #43cea2 0%, #185a9d 100%);
}
.delete-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 20px;
  color: #fff;
  background: #fff3;
  border-radius: 50%;
  padding: 2px 6px;
  cursor: pointer;
  z-index: 3;
}
.title {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  width: 100%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 8px;
}
.empty {
  width: 100%;
  text-align: center;
  color: #bbb;
  margin-top: 40rpx;
  font-size: 28rpx;
}
</style> 